<template>
  <view class="data-row shadow-box rounded-20rpx flex justify-around mb-20rpx">
    <view class="data-cell py-20rpx">
      <wd-count-to :end-val="data.work" color="var(--color-t1)"></wd-count-to>
      <view class="text-title mt-20rpx">我的作品</view>
    </view>
    <view class="data-cell py-20rpx">
      <wd-count-to :end-val="data.revenue" color="var(--color-t1)"></wd-count-to>
      <view class="text-title mt-20rpx">我的收益</view>
    </view>
    <view class="data-cell py-20rpx">
      <wd-count-to :end-val="data.collection" color="var(--color-t1)"></wd-count-to>
      <view class="text-title mt-20rpx">我的收藏</view>
    </view>
  </view>
</template>

<script lang='ts' setup>
import { onLoad, onShow } from "@dcloudio/uni-app";
import { ref } from "vue";

const data = ref({
  work: 135,
  revenue: 13050.54,
  collection: 108
});
onShow(() => {
  console.log("onshow");
});
</script>

<style lang="scss" scoped>
.data-cell {
    flex-direction: column;
    text-align: center;
    width: 33.3%;
    color: var(--color-t1);
    font-size: 32rpx;
}
.data-row {
    background: var(--color-white);
    .text-title {
        color: var(--wot-color-text);
        font-size: 24rpx;
    }
}
</style>